<template>
    <div class="page-content">
      <table-bar :showTop="false" :columns="columns">
        <div slot="top" class="top-nav">
          <el-form label-width="70rem">
          <el-row>
          <el-select :default-active="$route.path" @change="chickvalue"
             v-model="searchValue" filterable placeholder="请输入/请选择" class="h-m-select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            v-model="item.value">
          </el-option>
        </el-select>
          </el-row>
          </el-form>
        </div>
        <div slot="bottom">
        <el-button type="primary"
        plain size="small"
        @click="addEven">
        新增商家</el-button>
          </div>
    </table-bar>
        <!-- 主体表格区域开始 -->
    <TheTable
      :columns="columns"
      :layout="layout"
      ref="tableRef"
      :data="allInfo.allList"
      :page.sync="page"
      :showPage="false"
    >
      <el-table-column
      type="index"
      width="50"
      label="序号">
    </el-table-column>
      <el-table-column
        label="id"
        prop="id"
        v-if="columns[0].show"
      />
      <el-table-column
        label="商家名称"
        prop="name"
        v-if="columns[1].show"
      />
      <el-table-column
        label="联系人"
        prop="contacts"
        v-if="columns[2].show"
      />
      <el-table-column
        label="联系电话"
        prop="phone"
        v-if="columns[3].show"
      />
      <el-table-column
        label="商家类型"
        prop="type"
        v-if="columns[4].show"
      />
      <el-table-column
        label="创建时间"
        prop="gmtCreate"
        v-if="columns[5].show"
      />
      <el-table-column
        label="修改时间"
        prop="gmtModified"
        v-if="columns[6].show"
      />

        <el-table-column fixed="right" label="操作" width="150rem">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit"
          @click="showEditDialog(scope.row.id)"
          >
            编辑
          </el-button>
          <el-button type="text" style="color: #FA6962" icon="el-icon-delete"  @click="tableDelete(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </TheTable>
    <!-- 表格区域结束 -->
   <!-- 页码条区域开始 -->
    <div class="page-css">
      <el-pagination
        :page-sizes="[2,5, 10, 15]"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-if="true"
      >
      </el-pagination>
    </div>
    <!-- 页码条区域结束 -->

       <!-- 修改订单弹窗开始 -->
    <el-dialog
      title="修改商家信息"
      :visible.sync="editDialogVisible"
      width="40%"
      @close="eidtDialogClosed">

      <el-form
      ref="editFormRef"
      :model="editForm"
      label-width=""      :rules="editFormRules"
      >
      <el-row>
        <el-col :span="10">
          <el-form-item label="商家名称" prop="name">
            <el-input v-model="editForm.name" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="editForm.contacts" ></el-input>
          </el-form-item>
       </el-col>
      </el-row>
      <el-row >
        <el-col :span="10" >
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="editForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
         <el-form-item label="商家类型" prop="type">
            <el-select v-model="editForm.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialog()">取 消</el-button>
        <el-button type="primary" @click=" editUserInfo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改订单弹窗结束 -->


       <!-- 新增订单弹窗开始 -->
      <el-dialog
      title="新增商家信息"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="tableClose"
      >

      <el-form
      :model="addInfo"
      status-icon
      :rules="addInfoRules"
      ref="addInfoRef"
      label-width="6.3rem"
      >
      <el-row>
        <el-col :span="10">
          <el-form-item label="商家名称" prop="name">
            <el-input v-model="addInfo.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="addInfo.contacts" ></el-input>
          </el-form-item>
       </el-col>
      </el-row>
      <el-row >
        <el-col :span="10" >
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="addInfo.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-form-item label="商家类型" prop="type">
            <el-select v-model="addInfo.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
     <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false" >取 消</el-button>
        <el-button type="primary" @click="addOrderInfo('addInfo')">提 交</el-button>
      </span>
    </el-dialog>
       <!-- 新增订单弹窗结束 -->
    </div>
</template>

<script>
import {
  getAllInfoByPage,
  showEidtRequest,
  EidtRequest,
  deleteOrder,
  AddOrder,
  getInfoByBatch,
} from "@/api/Basic/BuisnessPartner/ProcessingBuisness.js";
export default {
    name: 'ProcessingBuisness',
    meta: {
        title: '加工商家'
    },
    data() {
        return {
      // 根据商家类型查询
        searchValue:"",
        options: [{
          value: '供应商',
          label: '供应商'
        }, {
          value: '销售客户',
          label: '销售客户'
        },],
        value: '',
        businessTypeData:{
          pageNum:"1",
          pageSize:"10",
          type:"",
          id:""
        },

      //显示分页
      layout: "",
      // 查询到的用户信息对象
      allInfo:{
        // 主体表格数据
        allList: [],
        //详情列表数据存放
        tableData: [],
      },
      // 定义页码的一些参数
      page: {
        current: 1,
        pageSize: 10,
        pageNum: 1,
        total: 4,
      },
      processingId:"",
      // 主体表格的表头数据
      columns: [
        { name: "id", show: false, prop: "id" },
        { name: "商家名称", show: true, prop: "name" },
        { name: "联系人", show: true, prop: "contacts" },
        { name: "联系电话", show: true, prop: "phone" },
        { name: "商家类型", show: true, prop: "type" },
        { name: "创建时间", show: true, prop:"gmtCreate"},
        { name: "修改时间", show: true, prop: "gmtModified" },
      ],
      // 控制修改用户对话框的显示与隐藏
      editDialogVisible:false,
      // 查询到的用户信息对象
      editForm:{},
      // 修改表单的验证规则对象
      editFormRules:{
        name:[
          { required:true, message:"请输入商品名称", trigger:'blur'},
        ],
        contacts:[
          { required:true, message:"请输入联系人", trigger:'blur'},
        ],
        phone:[
          { required:true, message:"请输入联系电话", trigger:'blur'},
        ],
        type:[
          { required:true, message:"请输入商家类型", trigger:'blur'},
        ],
      },
      // ------------------新增订单的一些数据-----------
      // 添加表单的数据
      addInfo:{
        contacts:"",
        name:"",
        phone:"",
        type:"",
        processingId:"",
      },
      // 弹窗的显示与隐藏
      dialogVisible:false,
      // 表单验证规则
      addInfoRules:{
         name:[
          { required:true, message:"请输入商品名称", trigger:'blur'},
        ],
        contacts:[
          { required:true, message:"请输入联系人", trigger:'blur'},
        ],
        phone:[
          { required:true, message:"请输入联系电话", trigger:'blur'},
        ],
        type:[
          { required:true, message:"请输入商家类型", trigger:'blur'},
        ],
      },
    }
  },
   created() {
      // 展示数据
      this.setAllList();
   },
  methods: {
    //根据商家类型查询数据
      async chickvalue() {
      console.log("商家类型：", this.searchValue);
      if (!this.searchValue) {
        this.setAllList();
      } else {
        this.businessTypeData.type = this.searchValue;
        this.businessTypeData.id = this.$store.state.Usersetting.BaseInfo.id;
        console.log("asdsada ",this.businessTypeData.id)
        const { data: res } = await getInfoByBatch(this.businessTypeData);
        console.log("请求到的列表", res);
        if (res.statusCode !== 20000) {
          this.$message.error("暂无该商家类型数据");
        } else {
          this.allInfo.allList = res.data.records;
        }
      }
    },
    //  获取主体表格数据
    async setAllList() {
      this.processingId = this.$store.state.Usersetting.BaseInfo.id;
      const { data: res } = await getAllInfoByPage(
        this.page.pageNum,
        this.page.pageSize,
        this.processingId
      );
      console.log("请求到的列表", res);
      if (res.statusCode !== 20000) {
        this.$message.error("查询数据失败");
      } else {
        this.allInfo.allList = res.data.records;
        this.page.total = res.data.total;
      }
    },
    // 根据id展示编辑用户的对话框
    async showEditDialog(id){
      console.log(id)
      const { data: res } = await showEidtRequest(id);
      console.log("修改用户请求到的列表", res);
      if(res.statusCode !== 20000){
          this.$message.error("查询数据失败");
      }

      this.editForm = res.data;
      this.editDialogVisible = true;
    },
    // 监听修改用户对话框的关闭事件
    eidtDialogClosed(){
      this.$refs.editFormRef.resetFields()
    },
    // 按下确定按钮，修改数据
    editUserInfo(){
      const id = this.editForm.id;
      delete this.editForm.id;
      // delete this.editForm.guige;
      delete this.editForm.gmtCreate;
      delete this.editForm.gmtModified;
      this.$refs.editFormRef.validate(async valid=>{
        if(!valid) return
        // 发起修改用户信息的数据请求
        const{data:res} = await EidtRequest(id,this.editForm)
        if(res.statusCode !== 20000) {
          return this.$message.error("修改用户失败");
        }
        console.log("修改后的数据",res)
        // 关闭对话框
        this.editDialogVisible = false;
        // 刷新数据列表
        this.setAllList()
        // 提示修改成功
        this.$message.success("更新用户成功");
      })
    },
     // 根据id删除订单
    async tableDelete(id) {
      console.log(id)
      const confirmResult = await this.$confirm(
        "此操作将永久删除该订单, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }

      const { data: res } = await deleteOrder(id);
      if (res.statusCode == 20000) {
        this.$message.success("已成功删除该订单");
        this.setAllList();
      } else {
        this.$message.error("删除该订单失败");
      }
    },
    //----------------------新增表单的一些方法---------------

      // 添加订单
    addOrderInfo() {
      this.$refs["addInfoRef"].validate(async (valid) => {
        if (valid) {
          this.addInfo.processingId = this.$store.state.Usersetting.BaseInfo.id;

          const { data: res } = await AddOrder(this.addInfo);
          console.log(res);
          if (res.statusCode === 20000) {
            this.$message.success("增加成功");
            // 刷新页面
            this.setAllList();
            this.dialogVisible = false;
            // 清空弹窗
            this.addInfo = {};
          } else {
            if (res.data == null) {
              return this.$message.error("添加失败");
            }
          }
          this.reload();
        } else {
          return this.$message.error("请输入完整信息");
        }
      });
    },
     //打开新增表单
    addEven() {
      this.dialogVisible = true;
    },
    //重置
    resetForm() {
      this.$nextTick(() => {
        this.$refs.addInfoRef.resetFields();
      });
    },
    //点击“取消”关闭修改表单
    editDialog() {
      this.editDialogVisible=false;
      this.resetForm();
    },
   // 点击右上角“叉号”关闭弹窗
    tableClose() {
      this.dialogVisible=false;
      this.resetForm();

    },
    handleCurrentChange(newSize){
      console.log(newSize)
      this.page.pageNum = newSize;
      // 重新获取数据
      this.setAllList()

    },
    handleSizeChange(newPage){
      console.log(newPage)
      this.page.pageSize = newPage
      this.setAllList()
    },
}
}
</script>

<style lang="sass" scoped>
.top-nav{
  margin-bottom:0.7rem;
}
.page-css{
   margin-top: 1rem;
  text-align: center;
}
</style>
